<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting" :style="expendStyle">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>收费管理</a-breadcrumb-item>
        <a-breadcrumb-item>停车记录</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">进场时间</div>
          <template>
            <div class="button_time">
              <a-button
                type="primary"
                @click="button_time(0)"
                :style="computedStyle(0)"
                >今天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(1)"
                :style="computedStyle(1)"
                >昨天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(2)"
                :style="computedStyle(2)"
                >本周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(3)"
                :style="computedStyle(3)"
                >上周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(4)"
                :style="computedStyle(4)"
                >本月</a-button
              >
            </div>
          </template>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                :showTime="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                @ok="onOk"
                @change="onChange"
                :value="rangePicker()"
              />
            </div>
          </template>
        </div>
        <div class="box-condition-item">
          <div style="margin: 0 50px">停车点</div>
          <template>
            <a-select
              style="margin: 0 100px 0 16px; width: 200px"
              showSearch
              mode="multiple"
              placeholder="选择停车点"
              optionFilterProp="children"
              v-model="selectParkId"
              @change="selectParkChange"
              :allowClear="true"
            >
              <a-select-option v-for="p in parks" :key="p.id" :value="p.id"
                >{{ p.parkName }}
              </a-select-option>
            </a-select>
          </template>
          <div style="margin: 0px 20px 0 50px">停车位编号</div>
          <template>
            <a-input
              style="margin: 0px 20px 0 0px; width: 200px"
              v-model="inputTruckSpaceName"
              placeholder="停车位编号"
            />
          </template>
        </div>
        <div class="box-condition-item">
          <div style="margin: 10px 50px">设备编号</div>
          <template>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputImei"
              placeholder="设备编号"
            />
          </template>
          <div style="margin: 0 50px">车牌号</div>
          <template>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputPlate"
              placeholder="车牌号"
            />
          </template>
          <br />
          <div style="margin: 0 10px">车牌识别筛选</div>
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="plateScreen(0)"
            >全部</a-button
          >
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="plateScreen(1)"
            >有牌</a-button
          >

          <!-- 清除 -->
          <div style="margin: 10px 50px">
            <a-button
              type="primary"
              style="margin: 0 0 0 20px"
              @click="querSelect"
              >查询</a-button
            >
            <a-button style="margin: 0 0 0 20px" icon="sync" @click="reset"
              >重置</a-button
            >
          </div>
        </div>
        <div class="box-expand" @click="switchExpend">
          点击{{ isExpand ? "收起" : "展开" }}
        </div>
      </div>
    </div>

    <!-- 表单 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="exportExcel" icon="download"
            >导出</a-button
          >
          <a-button type="primary" @click="exportExcelRecord()" style="margin-left: 10px;">导出记录</a-button>
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @change="tableChange"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
        >
          <!-- <template slot="sumTime" slot-scope="text">
                        <div>{{text}}</div>
                    </template> -->
          <template slot="shouldMoneySlot" slot-scope="text">
            <div>{{ text == undefined || text == "" ? text : text / 100 }}</div>
          </template>
          <template slot="detail" slot-scope="text, record">
            <a-button type="primary" @click="orderDetail(record)"
              >订单详情</a-button
            >
          </template>
          <!-- 脚步 -->
          <template slot="footer" v-if="dataSource.length != 0">
            <div style="display: flex; height: 30px; margin: 0 -16px">
              <div style="flex: 1 1 10%; height: 100%; padding-left: 1%">
                合计
              </div>
              <div style="flex: 1 0 11.7%; height: 100%; padding-left: 0.3%">
                {{ computedDue }}
              </div>
            </div>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 弹窗  @ok="handleOk" @cancel="cancel"-->
    <a-modal
      title="车牌修改"
      v-model="correctPopupData.visible"
      :width="1280"
      @ok="commitCorrect"
      @cancel="cancelCorrect"
      :confirmLoading="correctPopupData.loading"
    >
      <div class="box-correction-popup">
        <!-- 图片 -->
        <a-carousel class="box-image" autoplay>
          <template v-for="image in correctPopupData.imageList">
            <img :key="image" :src="image" class="icon-image" />
          </template>
        </a-carousel>

        <!-- 修正 -->
        <div class="box-correct">
          <div class="item-correct">
            <div class="text-correct">识别车牌</div>
            <a-input
              class="text-value"
              :disabled="true"
              v-model="correctPopupData.licencePlate"
            />
          </div>
          <div class="item-correct">
            <div class="text-correct">修改车牌</div>
            <a-input
              class="text-value"
              v-model="correctPopupData.updatePlate"
            />
          </div>
          <div class="item-correct">
            <div class="text-correct">备注</div>
            <a-input
              class="text-value"
              placeholder="修改原因"
              v-model="correctPopupData.reason"
            />
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 弹窗 -->
    <a-modal
            :title="taskRecordTitle" v-model="dispatchPopupData.visible"
            :confirmLoading="dispatchPopupData.loading"
            @cancel="() => { this.hideDispatchPopup() }" @ok="this.hideDispatchPopup()">
      <div class="list-node-table">
        <a-table
                :columns="tasksColumns"
                :data-source="taskData"
                size="middle"
                :pagination="paginationOne"
        >

        <template slot="state" slot-scope="text">
          <div v-if="text == 0">等待</div>
          <div v-else-if="text == 1">进行中</div>
          <div v-else-if="text == 2">完成</div>
          <div v-else-if="text == 3">异常</div>
          <div v-else-if="text == 4">缺失</div>
          <div v-else>错误</div>
        </template>

        <template slot="progress" slot-scope="text">
          <div>
            {{text}}%
          </div>
        </template>

        <template slot="link" slot-scope="text">
          <div v-if="text !== ''">
            <a :href="text">
              下载
            </a>
          </div>
        </template>

        <template slot="operation" slot-scope="text">
          <div class="operation">
            <a-button @click="deleteTaskClick(text)"> 删除 </a-button>
          </div>
        </template>

        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
    import moment from "moment";
    import CommonApi from "../../api/CommonApi";
    import ParkingRecordApi from "../../api/charge/ParkingRecord";
    import CorrectApi from "../../api/ParkingRecord.js";
    import ParkApi from "../../api/system/ParkApi";

    const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "5%",
  },
  {
    title: "车牌号",
    dataIndex: "licencePlate",
    width: "8%",
  },
  {
    title: "置信度",
    dataIndex: "pre",
    width: "6%",
  },
  {
    title: "进场时间",
    dataIndex: "startTime",
    width: "9%",
  },
  {
    title: "离场时间",
    dataIndex: "endTime",
    width: "10%",
  },
  {
    title: "停车时长",
    dataIndex: "sumTime",
    width: "10%",
    // ,customRender:(text,row)=>{
    //     console.log("列数据");
    //     console.log(row);
    //     if(text == undefined || text ==''){
    //         return "1小时";
    //     //     setInterval(()=>{
    //     //         var start = row.startTime;
    //     //         console.log(start)
    //     //     //需要定时执行的方法
    //     //      console.log("1111");
    //     //      return "1小时";
    //     //     }, 1000)
    //     }else{
    //         return text;
    //     }
    //     // window.clearInterval(TimeName);
    // }
  },
  {
    title: "应收款（元）",
    dataIndex: "shouldMoney",
    scopedSlots: { customRender: "shouldMoneySlot" },
    width: "10%",
  },
  {
    title: "停车点",
    dataIndex: "parkName",
    width: "10%",
  },
  {
    title: "停车位编号",
    dataIndex: "truckSpaceName",
    width: "10%",
  },
  {
    title: "设备编号",
    dataIndex: "imei",
    width: "11%",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
  {
    title: "订单详情",
    scopedSlots: { customRender: "detail" },
  },
];

const dataSource = [];

const queryCondition = {
  parkID: "",
  plate: "",
  targetId: "",
  imei: "",
  truckSpaceName: "",
  startTimeStamp: "",
  endTimeStamp: "",
  timeScreenCondition: 6,
  havePlate: 0,
  limit: "100",
  curr: "1",
  //多停点list
  pID: [],
};

export default {
  name: "ParkingRecord",

  /*数据层*/
  data() {
    return {
      isExpand: true,
      parks: [],
      selectParkId: [],
      selectId: -1,
      momentArr: [],
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      paginationOne: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        current: 1,
        defaultPageSize: 5,
        onChange: (current) => this.changePage(current), //点击当前页码
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      queryCondition,
      inputPlate: "",
      inputTruckSpaceName: "",
      inputImei: "",

      /* 增加弹窗 */
      dispatchPopupData: {
        visible: false,
        loading: false
      },

      /* 修正弹窗 */
      correctPopupData: {
        visible: false,
        loading: false,
        id: "",
        imageList: [],
        licencePlate: "",
        updatePlate: "",
        reason: "",
      },
      time: "",
      loading: false,

    //  导出记录
      taskRecordTitle: "导出记录",
      taskData: [],
      tasksColumns: [
        {
          title: "任务名",
          dataIndex: "taskName",
          width: "8%",
        },
        {
          title: "用户账号",
          dataIndex: "account",
          width: "8%",
        },
        {
          title: "导出进度",
          dataIndex: "progress",
          scopedSlots: { customRender: "progress" },
          width: "8%",
        },
        {
          title: "导出状态",
          dataIndex: "state",
          scopedSlots: { customRender: "state" },
          width: "8%",
        },
        {
          title: "导出时间",
          dataIndex: "creatTime",
          width: "12%",
        },
        {
          title: "结束时间",
          dataIndex: "endTime",
          width: "12%",
        },
        {
          title: "下载地址",
          dataIndex: "link",
          scopedSlots: { customRender: "link" },
          width: "8%",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          width: "8%",
        },
      ],
    };
  },

  /*方法层*/
  methods: {
    /**表格**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    orderDetail(obj) {
      let _this = this;
      // _this.$router.push({ path: '/charge/orderDateil', query:{id:obj.id}});
      let routerJump = _this.$router.resolve({
        path: "/charge/orderDateil",
        query: {id: obj.id},
      });
      window.open(routerJump.href, "_blank");
      // this.$router.push(`/charge/orderDateil?data=${obj}`);
    },
    /*时间按钮控制*/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
                  .week(moment().week() - 1)
                  .startOf("week");
          momentEnd = moment()
                  .week(moment().week() - 1)
                  .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    rangePicker() {
      return this.momentArr;
    },

    plateScreen(sign) {
      this.queryCondition.havePlate = 0;
      if (sign != undefined) {
        this.queryCondition.havePlate = sign;
      }
      this.queryData();
    },

    reset() {
      this.inputPlate = "";
      this.inputTruckSpaceName = "";
      this.selectParkId = [];
      this.inputImei = "";
      this.momentArr = [];
      this.queryData();
    },
    querSelect() {
      this.queryData();
    },
    getQueryCondition() {
      let condition = this.queryCondition;
      let startTimeStamp = "";
      let endTimeStamp = "";
      condition.plate = this.inputPlate;
      condition.truckSpaceName = this.inputTruckSpaceName;
      // condition.parkID = this.selectParkId || "";
      condition.pID = this.selectParkId || [];
      condition.imei = this.inputImei;
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        condition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } else {
        condition.timeScreenCondition = "0";
      }
      condition.startTimeStamp = startTimeStamp;
      condition.endTimeStamp = endTimeStamp;
      return condition;
    },

    /* ---------------- 维度变化 -------------- */
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
    },

    onOk() {
      this.selectId = -1;
      this.queryData();
    },

    selectParkChange() {
      this.queryData();
    },

    /* ---------------- 停车点 ---------------- */
    initParkList() {
      CommonApi.getParkList()
              .then((data) => {
                this.parks = data.data;
              })
              .catch((err) => {
                console.log("error:", err);
              });
    },

    /* ---------------- 查询 ---------------- */
    queryData() {
      this.loading = true;
      //清除定时器
      window.clearInterval(this.time);
      let condition = this.getQueryCondition();
      ParkingRecordApi.getEntryExitRecordList(condition)
              .then((data) => {
                let {list, total, pageNum, pageSize} = data.data;
                let array = list || [];
                array = array.map((item, index) => {
                  return {...item, no: total - (pageNum - 1) * pageSize - index};
                });
                for (var i in array) {
                  if (
                          array[i].endTime == null ||
                          array[i].endTime == "" ||
                          array[i].endTime == undefined
                  ) {
                    var timeD = this.getTimeDifference(
                            array[i].startTime,
                            this.nowTime()
                    );
                    array[i].sumTime = timeD;
                  }
                }
                this.dataSource = array;
                this.pagination.total = total;
                this.pagination.current = pageNum;
                // 定时器
                if (this.dataSource.length > 0) {
                  this.time = setInterval(() => {
                    for (var i in this.dataSource) {
                      if (
                              this.dataSource[i].endTime == null ||
                              this.dataSource[i].endTime == "" ||
                              this.dataSource[i].endTime == undefined
                      ) {
                        var timeD = this.getTimeDifference(
                                this.dataSource[i].startTime,
                                this.nowTime()
                        );
                        this.dataSource[i].sumTime = timeD;
                      }
                    }
                  }, 1000);
                }
                this.loading = false;
              })
              .catch((error) => {
                console.log("获取停车记录数据异常！", error);
                this.loading = false;
              });
    },
    nowTime() {
      let yy = new Date().getFullYear();
      var mm =
              new Date().getMonth() < 10
                      ? "0" + (new Date().getMonth() + 1)
                      : new Date().getMonth() + 1;
      var dd =
              new Date().getDate() < 10
                      ? "0" + new Date().getDate()
                      : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
              new Date().getMinutes() < 10
                      ? "0" + new Date().getMinutes()
                      : new Date().getMinutes();
      let ss =
              new Date().getSeconds() < 10
                      ? "0" + new Date().getSeconds()
                      : new Date().getSeconds();
      return yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    getTimeDifference(startTime, endTime) {
      // let timeData={}
      var timeStr = "";
      if (startTime != null) {
        let sd = startTime.substring(0, 19).replace(/-/g, "/"); // 将时间字符串截取到秒，并将其中的-换成/
        let se = ""; // 这是定义结束时间，如果为空，就获取当前时间
        let cdate = new Date();
        if (endTime != null || endTime != "") {
          se = endTime.substring(0, 19).replace(/-/g, "/"); // 将时间字符串截取到秒，并将其中的-换成/
        } else {
          se = cdate.getTime();
        }
        let sde = new Date(se).getTime() - new Date(sd).getTime(); // 将时间字符转成时间戳
        if (sde > 1) {
          // 当有差值时，就计算
          // let a = (sde/1000 + '').split('.') // 这是获取ms
          // if(a.length>1){
          //     // timeData['ms'] = Math.floor(Number('0.'+a[1]*1000))
          //     if(Math.floor(Number('0.'+a[1]*1000)) >0){
          //         timeStr=timeStr+Math.floor(Number('0.'+a[1]*1000))+"秒"
          //     }
          // }
          let d = (sde / 1000 / 60 / 60 / 24 + "").split("."); // 这是获取h d
          if (Number(d[0]) != null && Number(d[0]) != "") {
            timeStr = timeStr + Number(d[0]) + "天";
          }
          // timeData['d'] = Number(d[0])  // 这是获取d
          if (d.length > 1) {
            // timeData['h'] = Math.floor(Number('0.'+d[1])*24)
            if (Math.floor(Number("0." + d[1]) * 24) > 0) {
              timeStr = timeStr + Math.floor(Number("0." + d[1]) * 24) + "小时";
            }
          }
          let c = (sde / 1000 / 60 / 60 + "").split("."); // 这是获取min
          if (c.length > 1) {
            // timeData['min'] = Math.floor(Number('0.'+c[1])*60)
            if (Math.floor(Number("0." + c[1]) * 60) > 0) {
              timeStr = timeStr + Math.floor(Number("0." + c[1]) * 60) + "分";
            }
          }
          let b = (sde / 1000 / 60 + "").split("."); // 这是获取s
          if (b.length > 1) {
            // timeData['s'] = Math.floor(Number('0.'+b[1])*60)
            if (Math.floor(Number("0." + b[1]) * 60) > 0) {
              timeStr = timeStr + Math.floor(Number("0." + b[1]) * 60) + "秒";
            }
          }
        }
      }
      return timeStr;
    },

    /* ---------------- 表格 ---------------- */
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          }, // 点击行
          dblclick: () => {
            this.showCorrectionPopup(record);
          },
        },
      };
    },

    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /* ---------------- 表单功能 ---------------- */
    // exportExcel() {
    //   let condition = this.getQueryCondition();
    //   ParkingRecordApi.exportEntryExitRecordExcel(condition)
    //           .then((res) => {
    //             const link = document.createElement("a");
    //             const blob = new Blob([res.data], {
    //               type: "application/vnd.ms-excel",
    //             });
    //             var fileName = decodeURIComponent(res.headers.filename);
    //             if (fileName == null || fileName == "undefined") {
    //               fileName = "停车记录.xlsx";
    //             }
    //             link.style.display = "none";
    //             link.href = URL.createObjectURL(blob);
    //             link.setAttribute("download", `${fileName}`);
    //             link.click();
    //           })
    //           .catch((err) => {
    //             let data = err.data;
    //             if (data) {
    //               return this.$message.warn(data);
    //             }
    //           });
    // },

    exportExcel() {
      this.$message.success("已加入导出任务");
      let condition = this.getQueryCondition();
      ParkingRecordApi.exportEntryExitRecordExcel(condition);
    },

    downloadPicDataClick() {
      let condition = this.getQueryCondition();
      let total = this.pagination.total;
      if (total > 1000) {
        return this.$message.error(
                "导出数据大于1000，请将数据控制在2000以下在进行导出处理！"
        );
      }
      if (total == 0) {
        return this.$message.error("无数据可导出！");
      }
      this.$message.success("文件导出中，请前往配置中心-导出文件进行查看！");
      ParkingRecordApi.downLoadEntryExitImages(condition)
              .then(() => {
              })
              .catch((err) => {
                let data = err.data;
                if (data) {
                  return this.$message.warn(data);
                }
              });
    },

    /* ---------------- 标题展开 ---------------- */
    switchExpend() {
      this.isExpand = !this.isExpand;
    },

    /* ---------------- 车牌纠正弹窗 ---------------- */
    showCorrectionPopup(item) {
      let {licencePlate, comeInUrl, getOutUrl, id} = item;
      this.correctPopupData.visible = true;
      let imageList = [];
      if (comeInUrl) {
        let array = comeInUrl.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
          // return Constant.QiNiuURL + '/' + item;
        });
        imageList.push(...array);
      }
      if (getOutUrl) {
        let array = getOutUrl.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
        });
        imageList.push(...array);
      }
      this.correctPopupData.imageList = imageList;
      this.correctPopupData.loading = false;
      this.correctPopupData.id = id;
      this.correctPopupData.licencePlate = licencePlate;
      this.correctPopupData.updatePlate = "";
      this.correctPopupData.reason = "";
    },

    hideCorrectionPopup() {
      this.correctPopupData.visible = false;
    },

    commitCorrect() {
      let {updatePlate, reason, id} = this.correctPopupData;
      updatePlate = updatePlate.trim();
      if (updatePlate.length == 0) {
        this.$message.error("修改车牌不能为空");
        return;
      }

      reason = reason.trim();
      if (reason.length == 0) {
        this.$message.error("修改车牌不能为空");
        return;
      }

      let condition = {targetId: id, newPlate: updatePlate, remark: reason};
      this.correctPopupData.loading = true;
      CorrectApi.editPlate(condition)
              .then((data) => {
                this.correctPopupData.loading = false;
                if (data.code === 2000) {
                  this.$message.success("修改成功");
                  this.queryData();
                  this.hideCorrectionPopup();
                } else {
                  this.$message.warn("修改失败");
                }
              })
              .catch(() => {
                this.correctPopupData.loading = false;
                this.$message.error("修改失败");
              });
    },

    cancelCorrect() {
      this.hideCorrectionPopup();
    },


    //  导出记录部分
    hideDispatchPopup() {
      this.dispatchPopupData.visible = false;
      this.taskData = [];
    },
    exportExcelRecord() {
      this.getExportTaskList(
              this.paginationOne.defaultPageSize,
              this.paginationOne.current
      );
      this.dispatchPopupData.visible = true;
      this.dispatchPopupData.loading = false;
    },
    changePage(curr) {
      this.getExportTaskList(
              this.paginationOne.defaultPageSize,
              curr
      );
    },
    getExportTaskList(limit, curr) {
      ParkingRecordApi.getExportTaskList({
        limit: limit,
        curr: curr,
      })
      .then((data) => {
        this.taskData = data.data.list;
        this.paginationOne.total = data.data.total;
        this.paginationOne.current = curr;
      })
      .catch((err) => {
        console.log("error:", err);
        this.$message.warn("获取导出记录异常:" + err.data);
      });
    },
    deleteTaskClick(row) {
      ParkingRecordApi.deleteTaskClick({id: row.id})
              .then((data) => {
                if (data.code === 2000) {
                  this.$message.success("删除成功");
                }
                this.getExportTaskList(this.paginationOne.defaultPageSize, this.paginationOne.current);
              })
              .catch((err) => {
                this.$message.warn("删除异常:" + err.data);
              });
    },
  },

  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },

    expendStyle() {
      return this.isExpand ? "" : "height: 150px; overflow: hidden;";
    },
    computedDue() {
      let dataSource = this.dataSource || [];
      let result = 0;
      dataSource.forEach((item) => {
        result += isNaN(parseInt(item.shouldMoney))
          ? 0
          : parseInt(item.shouldMoney);
      });
      return result / 100;
    },
  },

  /*渲染层*/
  mounted() {
    this.button_time(0);
    this.initParkList();
  },
  destroyed() {
    //清除定时器
    window.clearInterval(this.time);
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  padding-bottom: 40px;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 展开 */
.box-expand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* text */
  cursor: pointer;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  color: #020202;
  background: white;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-top: 15px;
}

.box-condition-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%; /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}

.standardItem {
  display: flex;
  align-items: center;
  margin-top: 0.05rem;
  padding: 0.05rem 0;
}

.standardItem .itemText {
  margin: 0 0.1rem;
  width: 1.4rem;
}
</style>
